// ----------------------- 获取学员数据 -------------------------

function getStudentList() {
  axios.get('/student/list').then(({data: res}) => {
    // console.log(res);
    if (res.code === 0 ) {
      /*
        1.先遍历
        2.遍历的过程中 -- 创建标签
        3.字符串拼接
        4.找到容器 innerHTML 渲染
      */ 
     let str = ''
     res.data.forEach((item,index) => {
        str += `<tr>
        <th scope="row">${index + 1}</th>
        <td>${item.name}</td>
        <td>${item.age}</td>
        <td>${item.sex}</td>
        <td>${item.group}</td>
        <td>${item.phone}</td>
        <td>${item.salary}</td>
        <td>${item.truesalary}</td>
        <td>${item.province}</td>
        <td>
          <button type="button" data-id="${item.id}"  class="btn btn-primary btn-sm">修改</button>
          <button type="button" class="btn btn-danger btn-sm">删除</button>
        </td>
      </tr>`
     })
    //  console.log(str);
     qs('tbody').innerHTML = str
    }
  })
}
getStudentList()



// ----------------------- 添加显示弹层 --------------------------
qs('#addBtn').onclick = function () {
  // 模态框显示
  qs('#addModal').classList.add('show')
  // 蒙层显示
  qs('#backdrop').classList.add('show')
}

// 隐藏弹层
qs('#closeAddBtn').onclick = function () {
    // 模态框隐藏
    qs('#addModal').classList.remove('show')
    // 蒙层隐藏
    qs('#backdrop').classList.remove('show')
}




// --------------------- 获取省 ---------------------
axios.get('/geo/province').then(({data: res}) => {
  // console.log(res); // res 数组 ['吉林', '....']
  let strProvince = '<option selected value="">--省--</option>'

  res.forEach(item => {
    // console.log(item);
    strProvince += `<option value="${item}">${item}</option>`
  })
  // qs('select[name="province"]').innerHTML = strProvince
  // 遍历两个省份下拉框, 分别设置内容
  qsAll('select[name="province"]').forEach(item => item.innerHTML = strProvince)
})
// --------------------- 省切换的时候，选择市 ---------------------
qsAll('select[name="province"]').forEach((item,i) => {
  console.log(item);
  item.onchange = function (e) {
    // console.log(i); 
    // 找到对应的县 - 重置
    qsAll('select[name="county"]')[i].innerHTML = `<option selected value="">--县--</option>`
    // console.log(this.value);
    // let pname = this.value
    // e.target 目标元素
    let pname = e.target.value
    axios.get('/geo/city', {
      params: {
        pname
      }
    }).then(({data: res}) => {
      console.log(res);
      let strCity = `<option selected value="">--市--</option>`
      // let strCity = ``
      res.forEach(item => {
        strCity+= `<option value="${item}">${item}</option>`
      })
      // qsAll('select[name="city"]') 获取页面中两个城市的下拉框
      qsAll('select[name="city"]')[i].innerHTML = strCity
    })
  }
})


// --------------------- 市切换的时候，选择县 ---------------------
qsAll('select[name="city"]').forEach((item, i) => {
  item.onchange = function () {
    // 省份
    let pname = qsAll('select[name="province"]')[i].value
    // 市
    let cname = this.value
    axios.get('/geo/county',{
      params: {
        pname,
        cname
      }
    }).then(({data: res}) => {
      // console.log(res);
      let strCounty = `<option selected value="">--县--</option>`
      // let strCity = ``
      res.forEach(item => {
        strCounty+= `<option value="${item}">${item}</option>`
      })
      qsAll('select[name="county"]')[i].innerHTML = strCounty
    })
  }
})


// -------------------- 添加完成 ----------------------------------
/*
  给添加学员表单注册submit事件
  (1) 阻止默认行为
  (2) 收集表单的信息
*/ 
qs('.add-form').onsubmit = function (e) {
  e.preventDefault()
  axios.post('/student/add', serializeForm('.add-form')).then(({data: res }) => {
    console.log('返回的数据----', res);
    // 2.判断code为0 - 成功, 需要调用获取学生数据的接口 目的: 重新渲染页面
    if (res.code === 0) {
      alert(res.message)
      // 重新渲染
      getStudentList()
      // 模态框隐藏
      qs('#addModal').classList.remove('show')
      // 蒙层隐藏
      qs('#backdrop').classList.remove('show')
    }


  }).catch(error => {
    // 1.用户少传数据, 需要弹窗提示报错信息
    // console.log(error);
    // console.dir(error)
    const { code, message } = error.response.data
    if (code === 1) {
      alert(message)
    }
  })
  // axios发送请求,如果成功.then() 如果失败.catch()
}

// ----------------------- 修改显示弹层 --------------------------
qs('tbody').onclick = function (e) {
  console.log(e.target);
  
  if (e.target.innerHTML === '修改') {
    // 获取当前学员的id
    const id = e.target.dataset.id
    // loading效果 
    axios.get(`/student/one?id=${id}`).then(({data: {code, data: res}}) => {
      if( code === 0 ) {
        console.log(res);
        // 数据回显
        // 精准查找 update-form
        // input type=text 


        // age: 27
        // city: "乌鲁木齐市"
        // county: "米东区"
        // group: 4
        // id: 1199
        // jing: 87.655755
        // name: "侯敏"
        // phone: "17883223554"
        // province: "新疆维吾尔自治区"
        // salary: 12283
        // sex: "女"
        // truesalary: 16204

        qs('.update-form input[name=age]').value = res.age
        qs('.update-form input[name=name]').value = res.name
        qs('.update-form input[name=phone]').value = res.phone
        qs('.update-form input[name=salary]').value = res.salary
        qs('.update-form input[name=truesalary]').value = res.truesalary

        // 单选框 性别 
        qs(`.update-form input[name=sex][value=${res.sex}]`).checked = true


        // 下拉框
        // 分组
        qs('.update-form select[name="group"]').value = res.group

        // 省
        qs('.update-form select[name="province"]').value = res.province

        // 市
        qs('.update-form select[name="city"]').innerHTML = `<option value=${res.city}>${res.city}</option>`

        // 县
        qs('.update-form select[name="county"]').innerHTML = `<option value=${res.county}>${res.county}</option>`

        // 隐藏域  - 设置id
        qs('.update-form input[name=id]').value = res.id

        // 弹层显示
        qs('#updateModal').classList.add('show')
        // 蒙层显示
        qs('#backdrop').classList.add('show')
      }


    })

  }

  
}
// 关闭修改学员弹窗
console.log(qs('#closeUpdateBtn'));
qs('#closeUpdateBtn').onclick = function () {
  // 弹层显示
  qs('#updateModal').classList.remove('show')
  // 蒙层显示
  qs('#backdrop').classList.remove('show')
}

// 修改学员 / 删除学员(事件委托)



// ------------------------- 修改学员 - 确认修改 ----------------------------
qs('.update-form').onsubmit = function (e) {
  e.preventDefault()
  // 获取id -- 方式一
  // const obj = serializeForm('.update-form')
  // obj.id = ???

  // 方式二 ---修改获取表单数据的函数 (增加一项 type=hidden的获取) 
  axios.put('/student/update', serializeForm('.update-form')).then(({data: res }) => {
    console.log('返回的数据----', res);
    // 2.判断code为0 - 成功, 需要调用获取学生数据的接口 目的: 重新渲染页面
    if (res.code === 0) {
      alert(res.message)
      // 重新渲染
      getStudentList()
      // 模态框隐藏
      qs('#updateModal').classList.remove('show')
      // 蒙层隐藏
      qs('#backdrop').classList.remove('show')
    }


  }).catch(error => {
    // 1.用户少传数据, 需要弹窗提示报错信息
    // console.log(error);
    // console.dir(error)
    const { code, message } = error.response.data
    if (code === 1) {
      alert(message)
    }
  })
  // axios发送请求,如果成功.then() 如果失败.catch()
} 